import React from 'react';
import { Box, Typography, Button } from '@mui/material';
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';

const ErrorBoundary: React.FC = () => {
  const error = useRouteError();
  
  let errorMessage = "发生了一个错误";
  if (isRouteErrorResponse(error)) {
    errorMessage = error.data?.message || error.statusText;
  } else if (error instanceof Error) {
    errorMessage = error.message;
  }

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
        gap: 2,
      }}
    >
      <Typography variant="h4" color="error">
        出错了！
      </Typography>
      <Typography variant="body1" color="text.secondary">
        {errorMessage}
      </Typography>
      <Button
        variant="contained"
        color="primary"
        onClick={() => window.location.reload()}
      >
        刷新页面
      </Button>
    </Box>
  );
};

export default ErrorBoundary;
